<template>
  <main class="main">
    <div class="bg1">
     
      <img :src="fwyd1.bgImg" alt="" class="banner">
      <span class="fwyd">{{fwyd1.title}}</span>
      <span class="fh1"
        >{{fwyd1.subtitle}}
      </span>
    </div>
    <div class="bg2">
     <div v-html="fwydxqy1"></div>
    </div>
    
    
    <Header></Header>
    <Footer></Footer>
  </main>
</template>

<script>
//引入头部组件
import { getFwyd,getFwydxqy } from "@/api/wslapi/";
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
export default {
  created () {
    this.fwyd(),
    this.fwydxqy()
  },
  data () {
    return {
      fwyd1:[],
      fwydxqy1:[]
    }
  },
  methods: {
    fwyd() {
      getFwyd().then((res) => {
        this.fwyd1 = res.data.data;
        console.log(res.data.data);
      });
    },
    fwydxqy() {
      getFwydxqy().then((res) => {
        this.fwydxqy1 = res.data.content;
        console.log(res.data.content);
      });
    },
  },
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
.bg1 {
  height: 593px;
  // background-image: url(./fwyd_img/banner.png);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 600px;
    width: 100%;
  }
  .banner {
    height: 593px;
  }
  .fwyd {
    min-width: 309px;
    height: 67px;
    font-size: 48px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 230px;
    left: 361px;
    text-align: left;
  }
  .fh1 {
    min-width: 675px;
    height: 99px;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 321px;
    left: 361px;
    text-align: left;
  }
}
/deep/.bg2 {
  height: 2500px !important;
  position: relative;
  top: 593px !important;
  .hd {
    min-width: 83px;
    height: 56px;
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 918px;
  }
  .fh2 {
    min-width: 420px;
    height: 40px;
    font-size: 20px;
    font-weight: 400;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 749px;
  }
  .box1 {
    min-width: 380px;
    height: 301px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 360px;
    .icon1 {
      min-width: 100px;
      height: 100px;
      position: absolute;
      top: 30px;
      left: 136px;
    }
    .yhj {
      min-width: 72px;
      height: 33px;
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 146px;
      left: 156px;
    }
    .fh3 {
      width: 284px;
      height: 44px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 203px;
      left: 48px;
      text-align: center;
    }
  }
  .box2 {
    min-width: 380px;
    height: 301px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 770px;
    .icon2 {
      min-width: 100px;
      height: 100px;
      position: absolute;
      top: 30px;
      left: 136px;
    }
    .mfcc {
      min-width: 96px;
      height: 33px;
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 146px;
      left: 142px;
    }
    .fh4 {
      width: 284px;
      height: 44px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 203px;
      left: 48px;
      text-align: center;
    }
  }
  .box3 {
    min-width: 380px;
    height: 301px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 1180px;
    .icon3 {
      min-width: 100px;
      height: 100px;
      position: absolute;
      top: 30px;
      left: 136px;
    }
    .tbyx {
      min-width: 96px;
      height: 33px;
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 146px;
      left: 142px;
    }
    .fh5 {
      width: 284px;
      height: 44px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 203px;
      left: 48px;
      text-align: center;
    }
  }
}
.bg3 {
  height: 712px;
  position: relative;
  // background-image: url(./fwyd_img/bg3.png);
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 712px;
    width: 100%;
  }
  .bg33 {
    height: 712px;
  }
  .jqts {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    top: 240px;
    left: 877px;
  }
  .fh6 {
    min-width: 294px;
    height: 40px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    top: 320px;
    left: 812px;
  }
  .icon4 {
    min-width: 56px;
    height: 56px;
    position: absolute;
    top: 404px;
    left: 550px;
  }
  .icon5 {
    min-width: 56px;
    height: 56px;
    position: absolute;
    top: 404px;
    left: 878px;
  }
  .icon6 {
    min-width: 56px;
    height: 56px;
    position: absolute;
    top: 404px;
    left: 1206px;
  }
  .lyjd {
    min-width: 84px;
    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    top: 418px;
    left: 630px;
  }
  .tsxm {
    min-width: 84px;
    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    top: 418px;
    left: 958px;
  }
  .whdkd {
    min-width: 105px;
    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    top: 418px;
    left: 1286px;
  }
}
.bg4 {
  height: 720px;
  position: relative;
  .xspt {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 876px;
  }
  .fh8 {
    min-width: 189px;
    height: 40px;
    font-size: 20px;
    font-weight: 400;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 864px;
  }
  .img44 {
    height: 434px;
    width: 1200px;
    position: absolute;
    top: 230px;
    left: 359px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 434px;
      width: 100%;
    }
    .image4 {
      width: 1200px;
    }
  }
}
</style>
